import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtTabs, AtTabsPane, AtIcon } from 'taro-ui'

import XHead from '@components/head'
import SingItem from '@components/singList'
import ActionSheet from '@components/actionSheet'
import searchApi from '@api/search'

import './result.scss'

class Result extends Component {
  constructor (props) {
    super(props)
    this.state = {
      interestInfo: {},
      current: 0,
      // 1: 单曲, 10: 专辑, 100: 歌手, 1000: 歌单, 1002: 用户, 1004: MV, 1006: 歌词, 1009: 电台, 1014: 视频
      tabList: [
        {
          type: 0,
          title: '综合'
        },
        {
          type: 1,
          title: '单曲'
        },
        {
          type: 1014,
          title: '视频'
        },
        {
          type: 100,
          title: '歌手'
        },
        {
          type: 10,
          title: '专辑'
        },
        {
          type: 1000,
          title: '歌单'
        },
        {
          type: 1009,
          title: '主播电台'
        },
        {
          type: 1002,
          title: '用户'
        }
      ],
      singList: [],
      songInfo: {},
      openEd: false
    }
  }

  config = {
    navigationBarTitleText: '视频'
  }

  componentWillMount () { }

  componentDidMount () {  }

  componentWillUnmount () { }

  componentDidShow () {  }

  componentDidHide () { }
  
  shouldComponentUpdate(nextProps){
    if (nextProps.isShow) {
      return true
    } else {
      return false
    }
  }

  componentWillReceiveProps (newProps) {
    if (newProps.isShow) {
      const paramsObj = {
        keywords: newProps.keywords,
        limit: 5
      }
      searchApi.searchMatch({keywords: newProps.keywords}).then(res => {
        this.setState({
          interestInfo: res.result.artist[0]
        })
      })
      searchApi.searchResult(paramsObj).then(res => {
        this.setState({
          singList: res.result.songs
        })
      })
    }
  }

  // 点击tab切换
  handleClick (value) {
    this.setState({
      current: value
    })
  }

  // 查看更多
  handleMore (item) {
    this.setState({
      openEd: true
    })
    searchApi.songDetail({ids: item.id}).then(res => {
      this.setState({
        songInfo: res.songs[0]
      })
    })
  }

  hiddenSheet () {
    this.setState({
      openEd: !this.state.openEd
    })
  }

  render () {
    return (
      <View className='result' style={{display: this.props.isShow ? 'block' : 'none'}}>
        <AtTabs
          current={this.state.current}
          scroll
          tabList={this.state.tabList}
          onClick={this.handleClick.bind(this)}
        >
          <AtTabsPane current={this.state.current} index={0}>
            <View class='total'>
              <Text className='result-interest'>你可能感兴趣</Text>
              <View className='at-row at-row__align--center'>
                <View className='at-col at-col-2'>
                  <Image src={this.state.interestInfo.picUrl} className='interest-img' />
                </View>
                <View className='at-col at-col-9'>
                  <Text className='interest-title'>歌手：{this.state.interestInfo.name}</Text>
                </View>
                <View className='at-col at-col-1'>
                  <AtIcon value='chevron-right' size='20' color='#999'></AtIcon>
                </View>
              </View>
              <View className='type-area'>
                <XHead title='单曲' />
                {
                  this.state.singList.map((item, index) => {
                    return (
                      <SingItem 
                        key={item + index}
                        singInfo={item}
                        onMore={this.handleMore.bind(this)}
                      />
                    )
                  })
                }
              </View>
            </View>
          </AtTabsPane>
          <AtTabsPane current={this.state.current} index={1}>
            <View class='total'>
              
            </View>
          </AtTabsPane>
        </AtTabs>
        {/* 底部呼出 */}
        <ActionSheet
          isOpened={this.state.openEd}
          onHidden={this.hiddenSheet.bind(this)}
          songInfo={this.state.songInfo}
        />
      </View>
    )
  }
}

Result.defaultProps = {
  keywords: '',
  isShow: false
}

export default Result
